<template>
	<w-app-container>
		<fx-page-header title="transfer"></fx-page-header>
		<el-button type="primary" @click='drawBoxPath'>haha线</el-button>
		<el-button type="primary" @click='drawBoxPath1'>haha线</el-button>
		<el-button type="primary" @click='drawBoxPath2'>haha线</el-button>
		<div class="">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="position: absolute; x: 0; y: 0; float: left; width: ">
				<path
					:d=oneD
					fill="none"
					stroke-width="2"
					stroke-dasharray="4 2"
					stroke="gray"
				/>
				<span>222</span>
			</svg>
			<div class="create-organ">
				<div class="">
					<div v-for="box in boxTable"
						:key="box.id"
						:name="box.name"
						:value="box.code"
						class="blueBox"
					>
						<span class="">工序{{box.level}}</span>
						<span class="centerName" @click='clickBox(box)'>{{box.name}}</span>
						<i class="icon-plus rightTop" @click='addProcess(box)'></i>
						<i class="icon-reduce rightMid" @click='reduceProcess(box)'></i>
					</div>
				</div>
			</div>
		</div>
	</w-app-container>
</template>
<script>
export default {
	name: 'process',
	data () {
		return {
			screenWidth: document.body.clientWidth,
			boxTable: [],
			oneD: ' ',
			width: 0,
			height: 0,
			startPositionList: ['left', 'right', 'top', 'bottom'],
			lineWidth: 60,
			lineHeight: 100,
			// listData: [{ id: '4', name: '哈哈4', code: '0004', parentId: '3', subId: '' }, { id: '3', name: '哈哈3', code: '0003', parentId: '2', subId: '4' }, { id: '1', name: '哈哈', code: '0001', parentId: '', subId: '2' }, { id: '2', name: '哈哈2', code: '0002', parentId: '1', subId: '3' }],
			listData: [],
			newBox: { id: 'temp', name: '', code: '', parentId: '', subId: '', level: 0 }
			// ' M40 100 L40 250 A20,20 0 0,0 60,270 L180 270 A20,20 0 0,1 200,290 L200 360'
		}
	},
	created () {
		this.init()
	},
	mounted () {
		const that = this
		window.onresize = () => {
			return (() => {
				window.screenWidth = document.body.clientWidth
				that.screenWidth = window.screenWidth
				console.log(that.screenWidth)
			})()
		}
	},
	methods: {
		clickBox (box) {
			console.log(1111)
		},
		addProcess (box) {
			if (box.id === 'temp') {
				return
			}
			var _newbox = JSON.parse(JSON.stringify(this.newBox))
			var parentBox = {}
			var childBox = {}
			if (box.subId !== '') {
				_newbox.subId = box.subId
				_newbox.parentId = box.id
				_newbox.level = box.level + 1
				this.listData.push(_newbox)
				this.getOneBox(_newbox.parentId).subId = 'temp'
				this.getOneBox(_newbox.subId).parentId = 'temp'
				parentBox.id = box.id
				childBox.id = box.subId
				childBox.level = box.level + 2
			} else {
				_newbox.subId = box.subId
				_newbox.parentId = box.id
				_newbox.level = box.level + 1
				this.getOneBox(_newbox.parentId).subId = 'temp'
				this.listData.push(_newbox)
			}
			console.log(this.listData)
			// make save Data
			// this.savebox()
			this.drawBoxPath()
		},
		reduceProcess (box) {
			var parentBox = {}
			var childBox = {}
			if (box.subId !== '') {
				this.getOneBox(box.parentId).subId = box.subId
				this.getOneBox(box.subId).parentId = box.parentId
				parentBox.id = box.id
				childBox.id = box.subId
				childBox.level = box.level + 2
				this.listData.splice(this.listData.indexOf(box), 1)
			} else {
				this.getOneBox(box.parentId).subId = ''
				this.listData.splice(this.listData.indexOf(box), 1)
			}
			console.log(this.listData)
			// make save Data
			// this.savebox()
			this.drawBoxPath()
		},
		savebox () {
			var saveData = {
				// id: 0,
				connectionType: 0,
				expendableUrls: [''],
				fileUrls: [''],
				lineId: 0,
				name: '',
				parentId: 0,
				procedureId: 0,
				productionUrls: [''],
				routingSopDTO: {
					id: 0,
					packingRequirement: '',
					performanceStandard: '',
					processingRequirement: '',
					qualityRequirements: '',
					remark: '',
					routingId: 0
				},
				seq: 0,
				stationIds: [0],
				// subId: 0,
				timeUnit: 0,
				workTimeCount: 0
			}
			return new Promise(resolve => {
				this.$fxApi('routing.saveOrUpdate')({
					data: saveData
				}).then(res => {
					// this.totalCount = this.$fxUtils.toNumber(res.total)
					// this.workKindData = res.data
					resolve()
				})
			})
		},
		init () {
			console.log('box')
			this.listData = [{ id: '4', name: '哈哈4', code: '0004', parentId: '3', subId: '' }, { id: '3', name: '哈哈3', code: '0003', parentId: '2', subId: '4' }, { id: '1', name: '哈哈', code: '0001', parentId: '', subId: '2' }, { id: '2', name: '哈哈2', code: '0002', parentId: '1', subId: '3' }]
		},
		linePath (line) {
			// this.oneD = 'M40 100 L40 250 M180 250 L180 360'
			this.oneD += line.path1 + line.path2
			// + line.path3 + line.path4 + line.path5
			console.log(this.oneD)
		},
		getOneBox (id) {
			let box
			this.listData.forEach((v) => {
				if (id === v.id) {
					box = v
				}
			})
			return box
		},
		clearoneD () {
			this.oneD = ' '
		},
		// 绘制所有链路
		drawBoxPath () {
			this.refreshPath()
			this.clearoneD()
			this.drawOneLine()
		},
		// 绘制一条链路
		drawOneLine () {
			// line.path1 + line.path2 + line.path3 + line.path4 + line.path5 + line.path6
			var _boxTable = this.boxTable
			for (var i = 0; i < _boxTable.length; i++) {
				this.drawBoxAndLine(_boxTable[i])
			}
		},
		// 绘制节点box和parentbox之间的线
		drawBoxAndLine (box) {
			var p = { y: 30, width: 180, height: 100 }
			p.x = p.width * (box.level) + 32 + (62 * box.level)
			var line = {
				path1: 'M' + (p.x + p.width) + ' ' + (p.y + (p.height / 2)) + ' ',
				path2: 'L' + (p.x + p.width + this.lineWidth) + ' ' + (p.y + (p.height / 2)) + ' '
			}
			// 画Box的连接线
			if (box.subId !== '') {
				this.linePath(line)
			}
		},
		// 获得某个节点的子节点
		getsubId (id, parentlevel) {
			// level 是这个链路中第几box
			const _listData = this.listData
			const subIdList = []
			_listData.forEach((v) => {
				if (id === v.parentId) {
					v.level = parentlevel + 1
					this.getsubId(v.id, parentlevel + 1)
					subIdList.push(v)
					this.boxTable[parentlevel + 1] = v
				}
			})
			return subIdList
		},
		// 获得所有根节点为起点的链路
		getRootNode () {
			const _listData = this.listData
			const rootList = []
			var _newbox = JSON.parse(JSON.stringify(this.newBox))
			if (this.listData.length < 1) {
				this.listData.push(_newbox)
			}
			_listData.forEach((v) => {
				if (v.parentId === '') {
					this.getsubId(v.id, 0)
					v.level = 0
					rootList.push(v)
					this.boxTable[0] = v
				}
			})
			return rootList
		},
		refreshPath () {
			this.boxTable = []
			this.getRootNode()
		}
	},
	computed: {
		enableFormaterState (val, key) {
			return (val, key) => {
				return 66
			}
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl';
.create-organ {
	flex: 1;
	position: absolute;
	max-height: 184px;
    overflow-y: hidden;
	width: 100%;
}
.blueBox{
	x:100px;
	y:100px;
	width:180px;
	height:100px;
	border:1px solid blue;
	position:relative;
	float: left;
	margin: 30px;
	display: inline-block;
}
.rightTop{
	position: relative;
	float: right;
	right: -16px;
	top: -16px;
}
.rightMid{
	position: relative;
	float: right;
	right: -48px;
	top: 50%;
	margin-top: -18px;
}
.icon-plus{
	background-image: url('~images/icon/artrouter/plus.png');
	width: 32px;
	height: 32px;
}
.icon-reduce{
	background-image: url('~images/icon/artrouter/reduce.png');
	width: 32px;
	height: 32px;
}
.el-icon-circle-plus{
	position: relative;
	y: 50%;
}
.el-icon-remove{
	position: relative;
	y: 0;
}
.centerName{
	position: absolute;
	text-align: center;
	width: 180px;
	height: 100px;
	left: 0px;
	line-height: 100px;
	font-size: 18px;
}
</style>

